<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审批请假信息模块</title>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="pageQuery" class="demo-form-inline">

        <el-form-item label="请假单号">
            <el-input v-model="pageQuery.leaveID" placeholder="请假单号"></el-input>
        </el-form-item>

        <el-form-item label="所属班级">
            <el-input v-model="pageQuery.className" placeholder="所属班级"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-row>

        <el-button type="primary" plain @click="exports">导出</el-button>

    </el-row>

    <!--审批数据对话框表单-->
    <el-dialog
            title="申请内容"
            :visible.sync="dialogVisible"
            width="30%"
            @close="dialogVisibleFalse()"
    >
        <el-form ref="form" :model="leave" label-width="80px">

            <el-form-item label="请假单号">
                <el-input v-model="leave.leaveID" :disabled="dialogType === 'edit'"></el-input>
            </el-form-item>

            <el-form-item  label="请假课程">
                <el-input v-model="leave.courseName" :disabled="dialogType === 'edit'"></el-input>
            </el-form-item>

            <el-form-item  label="请假事由">
                <el-input v-model="leave.reason" :disabled="dialogType === 'edit'"></el-input>
            </el-form-item>

            <el-form-item  label="请假天数">
                <el-input v-model="leave.daynum" :disabled="dialogType === 'edit'"></el-input>
            </el-form-item>

            <el-form-item label="申请人学号">
                <el-input v-model="leave.stuNo" :disabled="dialogType === 'edit'"></el-input>
            </el-form-item>

            <el-form-item label="请假申请时间">
                <el-input v-model="leave.applytime" :disabled="dialogType === 'edit'"></el-input>
            </el-form-item>

            <el-form-item label="审批意见">
                <el-input v-model="leave.opinion"></el-input>
            </el-form-item>

            <!-- 操作按钮 -->
            <el-form-item>
                <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                    <el-button
                            type="primary"
                            @click="approval(1)"
                            :disabled="!leave.opinion">同意
                    </el-button>
                    <el-button
                            @click="approval(2)"
                            :disabled="!leave.opinion">不同意
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>



    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="index" label="编号" width="80">
                <template #default="scope">
                    <!-- 根据当前页计算序号 -->
                    {{ (pageQuery.page - 1) * pageQuery.pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column
                    prop="leaveID"
                    label="请假单号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="courseName"
                    label="请假课程"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="reason"
                    align="center"
                    label="请假原因">
            </el-table-column>
            <el-table-column
                    prop="daynum"
                    align="center"
                    label="请假天数">
            </el-table-column>
            <el-table-column
                    prop="applytime"
                    align="center"
                    label="申请时间">
            </el-table-column>
            <el-table-column
                    prop="audittime"
                    align="center"
                    label="审批时间">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="审批状态">
                <template slot-scope="scope">
                    {{ getStatusText(scope.row.status) }}
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
                        <el-button type="primary"  @click="preview(scope.row)">预览</el-button>
                    </div>
                </template>

            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageQuery.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",

        mounted(){
            pageQuery: {
                // 每页显示的条数
                pageSize=10,
                    // 当前页码
                    page=1

            }
            //当页面加载完成后，发送异步请求，获取数据
            this.selectAll();
        },

        methods: {
            // 查询分页数据
            selectAll(){
                console.log(this.pageQuery)
                axios.post('http://localhost:8080/student/leave/page', this.pageQuery)
                    .then(resp => {
                        console.log(resp);
                        console.log(resp.data.data);
                        console.log(resp.data.data.records);
                        //设置表格数据
                        this.tableData = resp.data.data.records;
                        //设置总记录数
                        this.totalCount = resp.data.data.total;
                    })


            },

            preview(row){
                var _this=this;
                _this.leave = row;
                this.dialogVisible=true;
                this.dialogType="edit";
            },
            dialogVisibleFalse(){
                this.dialogVisible=false;
                this.leave = {
                    leaveID: '',
                    courseID: '',
                    reason: '',
                    daynum: "",
                    stuNo: "",
                    applytime: "",
                    status: "",
                    audittime: "",
                    opinion: ""
                };
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                this.selectAll();

            },

            //审批假条
            approval(status){

                var _this = this;
                _this.leave.status=status;
                console.log(_this.leave);
                // 发送ajax请求，添加数据
                axios.put('http://localhost:8080/student/leave', _this.leave)
                    .then(function (resp) {
                        if(resp.data.msg === 'success'){
                            //删除成功
                            _this.$message({
                                message: '恭喜你，修改成功',
                                type: 'success'
                            });
                            _this.dialogVisible = false;
                            //重新加载数据
                            _this.selectAll();
                        }
                    })
            },
            getStatusText(status) {
                switch (status) {
                    case "0": return '未审批';
                    case "1": return '同意';
                    case "2": return '不同意';
                    default: return '未知状态';
                }
            },
            //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                // 重新设置每页显示的条数
                this.pageQuery.pageSize  = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                // 重新设置当前页码
                this.pageQuery.page  = val;
                this.selectAll();
            },

            //单击删除
            deleteById(id){
                var _this = this;
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 发送ajax请求，添加数据
                    axios.delete('http://localhost:8080/student/leave/id',{params: { leaveID: id }})
                        .then(function (resp) {
                            console.log(resp)
                            if(resp.data.msg === 'success'){
                                //删除成功
                                // 重新查询数据
                                _this.selectAll();
                                // 弹出消息提示
                                _this.$message({
                                    message: '恭喜你，删除成功',
                                    type: 'success'
                                });

                            }
                        })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },

            // 批量删除
            deleteByIds(){
                // 弹出确认提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮

                    //1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.leaveID;

                    }

                    //2. 发送AJAX请求
                    var _this = this;
                    console.log(_this.selectedIds)
                    // 发送ajax请求，删除数据
                    axios.delete('http://localhost:8080/student/leave',{
                        data: _this.selectedIds // 直接传递数组
                    })
                        .then(function (resp) {
                            if(resp.data.msg === 'success'){
                                //删除成功
                                // 重新查询数据
                                _this.selectAll();
                                // 弹出消息提示
                                _this.$message({
                                    message: '恭喜你，删除成功',
                                    type: 'success'
                                });

                            }
                        })
                }).catch(() => {
                    //用户点击取消按钮

                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            exports(){
                let data = {...this.queryParams};
                data.page = 1
                data.size = 10000
                data.checkedall = JSON.stringify(this.checked)

                let url = "http://localhost:8080/api/sysCompetition/competitionJudgeExportData"   //跨域问题

                fetch(url,{method:"post",body: JSON.stringify(data),headers: {
                        'Content-Type': 'application/json',
                        "Authorization":localStorage.getItem("token")
                    }})
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.blob();
                    })
                    .then(blob => {
                        const url = window.URL.createObjectURL(blob); // 将 blob 转换为浏览器可以使用的 URL
                        const a = document.createElement('a'); // 创建一个隐藏的 <a> 标签
                        a.href = url;
                        a.download = '赛事评委打分列表.xlsx';      // 设置下载的文件名为 'competition.xlsx'
                        document.body.appendChild(a);         // 将 <a> 标签添加到 DOM 中
                        a.click();                            // 触发点击事件，启动下载
                        window.URL.revokeObjectURL(url);      // 释放 URL 对象
                    })
                    .catch(error => {
                        console.error('There was a problem with your fetch operation:', error);
                    });
            }


        },
        data() {
            return {
                pageQuery: {
                    // 每页显示的条数
                    pageSize: 10,
                    // 当前页码
                    page: 1,
                    leaveID: '',
                    className: ''
                },
                // 总记录数
                totalCount:0,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                dialogType:'',

                leave: {
                    leaveID: '',
                    status: "",
                    opinion: ""
                },
                // 被选中的id数组
                selectedIds:[],
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: []
            }
        }
    })

</script>

<style>
    /* 设置页面全局样式 */
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f9fafc;
        color: #444;
    }

    /* 表单容器样式 */
    .el-form {
        margin: 20px;
        background: linear-gradient(135deg, #ffffff, #f4f4f4);
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* 表单标签字体 */
    .el-form-item label {
        color: #666;
        font-weight: 600;
    }

    /* 按钮样式 */
    .el-button {
        margin-right: 10px;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.3s;
    }

    .el-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    /* 表单按钮区域 */
    .el-row {
        margin: 20px 0;
        text-align: right;
    }

    /* 弹窗样式 */
    .el-dialog {
        border-radius: 12px;
    }

    .el-dialog__header {
        background: linear-gradient(to right, #4caf50, #81c784);
        color: white;
        font-weight: bold;
        font-size: 18px;
        border-radius: 12px 12px 0 0;
    }

    .el-dialog__body {
        padding: 20px;
        background: #fdfdfd;
    }

    .el-dialog__footer {
        background-color: #f3f4f6;
    }

    /* 表格样式 */
    .el-table {
        margin: 20px 0;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .el-table__header-wrapper {
        background-color: #4caf50;
        color: white;
        font-weight: bold;
    }

    .el-table__row {
        transition: background-color 0.2s ease;
    }

    .el-table__row:hover {
        background-color: #f1f8e9;
    }

    /* 分页样式 */
    .el-pagination {
        margin: 20px 0;
        display: flex;
        justify-content: center;
        font-size: 14px;
    }

    /* 高亮表格行样式 */
    .warning-row {
        background-color: #fff9c4 !important;
    }

    .success-row {
        background-color: #c8e6c9 !important;
    }

    /* 输入框及下拉菜单样式 */
    .el-input,
    .el-select {
        border-radius: 6px;
        border-color: #cfd8dc;
        transition: all 0.3s;
    }

    .el-input:focus,
    .el-select:focus {
        border-color: #4caf50;
    }

    /* 消息提示 */
    .el-message {
        font-size: 16px;
        border-radius: 10px;
    }

    /* 自定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #4caf50;
        border-radius: 10px;
    }
</style>



</body>
</html>